<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./lib/bootstrap.min.css" />
        <script src="./lib/echarts.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
            <div class="container">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">鸿蒙生态开发学院</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">张三</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container my-5 text-center">
            <h1 class="text-center mb-4">第一套</h1>
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>就业薪资</div>
                            <div class="salary my-3">18000</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>班级人数</div>
                            <div class="num my-3">80</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>平均年龄</div>
                            <div class="age my-3">24</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>班级个数</div>
                            <div class="className my-3">8</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container my-5">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>班级薪资</div>
                            <div id="salary" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>薪资分布</div>
                            <div id="classPie" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container my-5 text-center">
            <h1 class="text-center mb-4">第二套</h1>
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>总销售额</div>
                            <div class="order-total my-3">18000</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>总订单数</div>
                            <div class="order-count my-3">80</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>月销售额</div>
                            <div class="order-month my-3">24</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container my-5">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>月销售趋势</div>
                            <div id="order-month" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>商品类别销售额</div>
                            <div id="order-pie" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container my-5 text-center">
            <h1 class="text-center mb-4">第三套</h1>
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>总购票数</div>
                            <div class="ticket-count my-3">24</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>场次数</div>
                            <div class="ticket-movies my-3">18000</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>销售额</div>
                            <div class="ticket-sum my-3">80</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container my-5">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>票种销量分布</div>
                            <div id="ticket-count" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>电影销售额统计</div>
                            <div id="movies-bar" style="height: 400px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container my-5 text-center">
            <h1 class="text-center mb-4">第四套</h1>
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>挂号总数</div>
                            <div class="appointment-count my-3">24</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>科室总数</div>
                            <div class="appointment-department my-3">18000</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>医生人数</div>
                            <div class="appointment-doctors my-3">80</div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>平均挂号费</div>
                            <div class="appointment-fee my-3">80</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container my-5">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>每日挂号数量趋势</div>
                            <div
                                id="appointment-daily"
                                style="height: 400px"
                            ></div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div>挂号分布</div>
                            <div
                                id="appointment-department"
                                style="height: 400px"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="./lib/bootstrap.bundle.min.js"></script>
        <script src="./lib/axios.js"></script>
        <script>
            window.onload = async function () {
                // 第一套
                let dashboard = await axios.get(
                    "http://localhost:3000/dashboard"
                );
                document.querySelector(".salary").innerHTML =
                    dashboard.data.salary;
                document.querySelector(".num").innerHTML = dashboard.data.num;
                document.querySelector(".age").innerHTML = dashboard.data.age;
                document.querySelector(".className").innerHTML =
                    dashboard.data.className;

                let salaryData = await axios.get(
                    "http://localhost:3000/salary"
                );

                let salarys = [],
                    classNames = [];
                salaryData.data.forEach((item) => {
                    salarys.push(item.salary);
                    classNames.push(item.className);
                });

                let salary = document.getElementById("salary");
                let salaryChart = echarts.init(salary);
                let salaryOption = {
                    title: {
                        text: "班级薪资",
                        left: "center",
                    },
                    xAxis: {
                        type: "category",
                        data: classNames,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: salarys,
                            type: "bar",
                        },
                    ],
                };
                salaryChart.setOption(salaryOption);

                let classData = await axios.get("http://localhost:3000/class");

                var classPie = document.getElementById("classPie");
                var classPieChart = echarts.init(classPie);
                var classPieOption = {
                    title: {
                        text: "薪资分布",
                        left: "center",
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        left: "center",
                        bottom: "1%",
                    },
                    series: [
                        {
                            name: "人数",
                            type: "pie",
                            radius: "50%",
                            // 将查询数据映射为一个新的数组
                            // 其中，name值为原数据的salary_range
                            // 其中，value值为原数据的count
                            data: classData.data.map((item) => ({
                                name: item.salary_range,
                                value: item.count,
                            })),
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                };
                classPieChart.setOption(classPieOption);

                // 第二套
                // 发送请求，获取Dashboard区域数据
                let orderDashboard = await axios.get(
                    "http://localhost:3000/orderDashboard"
                );
                // 获取三个区域dom并且添加数据
                document.querySelector(".order-total").innerHTML =
                    orderDashboard.data.total;
                document.querySelector(".order-count").innerHTML =
                    orderDashboard.data.count;
                document.querySelector(".order-month").innerHTML = (
                    orderDashboard.data.total / orderDashboard.data.count
                ).toFixed(2);

                // 获取order的月销售额的数据
                let orderLineData = await axios.get(
                    "http://localhost:3000/orderMonth"
                );
                // 提取月销售额中的月数据和销售额数据为两个数组
                let orderMonth = [],
                    orderMonthSum = [];

                orderLineData.data.forEach((item) => {
                    orderMonth.push(item.month + "月"),
                        orderMonthSum.push(item.sum);
                });
                // 设置 order 的 折线图
                var orderLine = echarts.init(
                    document.getElementById("order-month")
                );

                var orderLineOption = {
                    title: {
                        text: "月销售趋势",
                        left: "center",
                    },
                    xAxis: {
                        type: "category",
                        data: orderMonth,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: orderMonthSum,
                            type: "line",
                            smooth: true,
                        },
                    ],
                };
                orderLine.setOption(orderLineOption);
                let orderPieData = await axios.get(
                    "http://localhost:3000/orderCategory"
                );
                var orderPie = echarts.init(
                    document.getElementById("order-pie")
                );
                var orderPieOption = {
                    title: {
                        text: "商品类别销售额",
                        left: "center",
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        left: "center",
                        bottom: "bottom",
                    },
                    series: [
                        {
                            name: "销售额",
                            type: "pie",
                            radius: ["30%", "50%"],
                            data: orderPieData.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                };

                orderPie.setOption(orderPieOption);

                let ticketDashboard = await axios(
                    "http://localhost:3000/ticketDashboard"
                );
                document.querySelector(".ticket-count ").innerHTML =
                    ticketDashboard.data.dashboard.count;
                document.querySelector(".ticket-sum ").innerHTML =
                    ticketDashboard.data.dashboard.sum;
                document.querySelector(".ticket-movies ").innerHTML =
                    ticketDashboard.data.movies;

                let ticketTypeCount = await axios.get(
                    "http://localhost:3000/ticketTypeCount"
                );

                var ticketPie = echarts.init(
                    document.getElementById("ticket-count")
                );

                let ticketPieOption = {
                    title: {
                        text: "票种销量分布",
                        left: "center",
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        left: "center",
                        bottom: "bottom",
                    },
                    series: [
                        {
                            name: "销量",
                            type: "pie",
                            radius: ["15%", "50%"],
                            // 玫瑰图
                            roseType: "area",
                            data: ticketTypeCount.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                };

                ticketPie.setOption(ticketPieOption);

                let ticketBarData = await axios.get(
                    "http://localhost:3000/ticketTypeSum"
                );
                let ticketBarName = [],
                    ticketBarSum = [];
                ticketBarData.data.forEach((item) => {
                    ticketBarName.push(item.movie_name);
                    ticketBarSum.push(item.sum);
                });
                var ticketBar = echarts.init(
                    document.getElementById("movies-bar")
                );
                var ticketBarOption = {
                    title: {
                        text: "电影销售额统计",
                        left: "center",
                    },
                    xAxis: {
                        type: "category",
                        data: ticketBarName,
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: ticketBarSum,
                            type: "bar",
                        },
                    ],
                };

                ticketBar.setOption(ticketBarOption);

                // 第四套
                let appointmentDashboard = await axios.get(
                    "http://localhost:3000/appointmentDashboard"
                );
                document.querySelector(".appointment-count").innerHTML =
                    appointmentDashboard.data.count;
                document.querySelector(".appointment-department").innerHTML =
                    appointmentDashboard.data.department;
                document.querySelector(".appointment-doctors").innerHTML =
                    appointmentDashboard.data.doctors;
                document.querySelector(".appointment-fee").innerHTML = (
                    appointmentDashboard.data.fee * 1
                ).toFixed(2);

                let appointmentLineData = await axios.get(
                    "http://localhost:3000/appointmentDaily"
                );
                console.log(appointmentLineData);
                var appointmentLine = echarts.init(
                    document.getElementById("appointment-daily")
                );
                var appointmentLineOption = {
                    title: {
                        text: "每日挂号数量趋势",
                        left: "center",
                    },
                    xAxis: {
                        type: "category",
                        data: appointmentLineData.data
                            .map((item) => item.day)
                            .sort((a, b) => a - b),
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: appointmentLineData.data.map(
                                (item) => item.fee
                            ),
                            type: "line",
                        },
                        {
                            data: appointmentLineData.data.map(
                                (item) => item.fee
                            ),
                            type: "bar",
                        },
                    ],
                };

                appointmentLine.setOption(appointmentLineOption);

                appointmentPieData = await axios.get(
                    "http://localhost:3000/appointmentDepartment"
                );

                var appointmentPie = echarts.init(
                    document.getElementById("appointment-department")
                );
                var appointmentPieOption = {
                    title: {
                        text: "挂号分布（按科室）",
                        left: "center",
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        left: "center",
                        bottom: "bottom",
                    },
                    series: [
                        {
                            name: "挂号量",
                            type: "pie",
                            radius: ["30%", "50%"],
                            data: appointmentPieData.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                };

                appointmentPie.setOption(appointmentPieOption);
            };
        </script>
    </body>
</html>
